<template>
  <div class="app-container">
    <el-row style="margin-bottom:223px">
      <el-form label-width="auto">
        <el-form-item label="菜单权限" class="el-tree-wrap">
          <p class="all-expand">
            <span v-if="AddExpand" @click="unFoldAll()"><i class="el-icon-caret-bottom" />全部展开</span>
            <span v-else @click="closeAll()"><i class="el-icon-caret-top" />全部关闭</span>
          </p>
          <div>
            <el-tree
              v-if="openOrNot"
              ref="dept"
              :data="deptOptions"
              show-checkbox
              node-key="deptId"
              empty-text="加载中，请稍后"
              :props="defaultPropsDept"
              :default-expand-all="defaultExpand"
              :highlight-current="true"
              :render-content="renderContent"
              @check="handleChange"
            />
          </div>
        </el-form-item>
      </el-form>
    </el-row>
  </div>
</template>

<script>
import {
  listDept
} from '@/api/system/dept'
export default {
  // 接受父组件传过来的值
  props: {
    dataScopListDelList: {
      type: Array,
      // 当为数组类型设置默认值时必须使用数组返回
      default: function() {
        return []
      }
    }
  },
  data() {
    return {
      AddExpand: true,
      openOrNot: true,
      defaultExpand: false,
      // 选中的菜单树数据
      treeSelected: [],
      // 部门菜单树数据
      deptOptions: [],
      // 加载树形部门结构
      defaultPropsDept: {
        children: 'children',
        label: 'deptName'
      },
      // 选中表格对话框的存储的值
      multipleSelection: []
    }
  },
  mounted: function() {
    this.getList()
  },
  methods: {
    // 全部展开
    unFoldAll() {
      this.treeSelected = this.$refs.menu.getCheckedKeys().concat(this.$refs.menu.getHalfCheckedKeys())
      this.AddExpand = false
      this.defaultExpand = true
      this.openOrNot = false
      setTimeout(() => {
        this.openOrNot = true
        this.$nextTick(() => {
          this.$refs.menu.setCheckedKeys(this.treeSelected)
        })
      }, 10)
    },
    // 全部关闭
    closeAll() {
      this.treeSelected = this.$refs.menu.getCheckedKeys().concat(this.$refs.menu.getHalfCheckedKeys())
      this.AddExpand = true
      this.defaultExpand = false
      this.openOrNot = false
      setTimeout(() => {
        this.openOrNot = true
        this.$nextTick(() => {
          this.$refs.menu.setCheckedKeys(this.treeSelected)
        })
      }, 10)
    },
    // 当选中的行数发生变化时
    handleChange(data, nodefunction) {
      this.checkIds(nodefunction.checkedNodes)
    },
    // 获取选中的行数并且把值返回到父组件（roleDataScopeDet）
    checkIds(val) {
      var ids = ''
      for (var i = 0; i < val.length; i++) {
        ids += val[i].deptId + ','
      }
      this.$emit('multipleSelection', ids, this.multipleSelection)
    },
    getList() {
      this.tableLoading = true
      listDept().then(resp => {
        this.tableLoading = false
        if (resp) {
          this.deptOptions = resp.data
          this.echo()
        } else {
          this.msgError(resp.message)
        }
      })
    },
    // 回显数据
    echo: function() {
      // 获取父组件中 封装自定义行和列的信息（dataScopListDelList）
      var dataScopListDelList = this.dataScopListDelList
      // 遍历数组获取封装行对象的数组
      if (dataScopListDelList != null && dataScopListDelList.length > 0) {
        var dataObjRowList = {}
        for (var i = 0; i < dataScopListDelList.length; i++) {
          if (dataScopListDelList[i].dataObjRecordType === 'row') {
            dataObjRowList = dataScopListDelList[i].dataObjRowList
          }
        }
        // 回显选中了那些行
        dataObjRowList.forEach(row => {
          const checkDeptIds = []
          checkDeptIds.push(row.deptId)
          this.$refs.dept.setCheckedKeys(checkDeptIds)
        })
      }
    },
    // 清空勾选的部门
    emptmultipleSelection() {
      this.$refs.dept.setCheckedKeys([])
    }
  }
}
</script>
